<template>
	<view>
		<view class="bg"
			:style="{backgroundImage: 'url(' + $wanlshop.oss('/uploads/20230926/dd0f77a4ecc59a50de5221fe6c437118.png') + ')'}">
		</view>
		<!-- <view class="cu-custom" :style="{height: $wanlshop.wanlsys().height + 'px' }">
			<view class="cu-bar fixed" :style="{
				height: $wanlshop.wanlsys().height + 'px', 
				paddingTop: $wanlshop.wanlsys().top + 'px',
				color: '#333333'
			}">
			</view>
		</view> -->
		<view class="cu-custom" :style="{height: $wanlshop.wanlsys().height + 'px' }">
			<view class="cu-bar fixed" :style="{
				height: $wanlshop.wanlsys().height + 'px', 
				paddingTop: $wanlshop.wanlsys().top + 'px',
				color: '#333333'
			}">
				<view class="action">
					<text class="wlIcon-fanhui1" @tap="$wanlshop.back(1)"></text>
				</view>
			</view>
		</view>
		<view class="top">
			<view class="topFlex">
				<image :src="$wanlshop.oss(user.avatar)" mode="aspectFill" class="topFlexImg"></image>
				<view class="topFlexRight">
					<view class="topFlexRightTitle">{{user.nickname}}</view>
					<!-- <view class="topFlexRightText">
						<view>收藏1111</view>
						<view class="rightText1">获赞111</view>
					</view> -->
				</view>
			</view>
		</view>
		<!-- 列表 -->
		<view class="list">
			<view class="listItem" v-for="(item,index) in list" :key="index"
				@click="jump('/pages/circle/details?id='+item.id)">
				<image :src="item.images.length > 0 ? $wanlshop.oss(item.images[0]) : $wanlshop.oss()" class="listItemImg" mode="aspectFill"></image>
				<view class="listItemView">
					<view class="listItemTitle">{{item.title}}</view>
					<view class="listItemTime">{{item.updatetime_text}}</view>
					<view class="listItemFlex">
						<view class="iconfont icon-liulan1"></view>
						<view class="footerFlexNum">{{item.browse}}</view>
						<view class="iconfont icon-shoucang3"></view>
						<view class="footerFlexNum">{{item.collect}}</view>
						<view class="iconfont icon-comment"></view>
						<view class="footerFlexNum">{{item.comment}}</view>
					</view>
					<view class="listItemFlexText" @click.stop="deleteCilck(item.id,index)" v-if="item.status != 1">删除</view>
				</view>
			</view>
		</view>
		<block v-if="list.length === 0 && status !== 'loading'">
			<wanl-empty :text="empty" />
		</block>
		<u-modal v-model="show" content="确定删除吗？" @confirm="cfmDelete" show-cancel-button show-confirm-button
			:async-close="true"></u-modal>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				show:false,
				list: [],
				page: 1,
				empty: '没有发布任何圈子',
				reload: true, //判断是否上拉
				last_page: 0,
				status: 'loading',
				deleteId:'',
				deleteIndex:''
			}
		},
		computed: {
			...mapState(['user'])
		},
		// 下拉刷新
		onReachBottom() {
			if (this.page >= this.last_page) {
				this.status = 'noMore';
			} else {
				this.reload = false;
				this.contentText.contentdown = '上拉显示更多';
				this.page = this.page + 1; //页码+1
				this.status = 'loading';
				this.circleLists();
			}
		},
		onLoad() {
			this.circleLists()
		},
		methods: {
			deleteCilck(id,index) {
				this.deleteId = id
				this.deleteIndex = index
				this.show = true
			},
			async cfmDelete() {
				var that = this
				// setTimeout(() => {
				// 	that.show = false;
				// }, 3000)
				await uni.request({
					url: '/addons/circle/api.index/del',
					method: 'post',
					data: {
						id: this.deleteId
					},
					success: res => {
						that.show = false;
						this.list.splice(this.deleteIndex, 1)
						uni.showToast({
							title: '删除成功',
							icon: 'none',
							duration: 2000
						});
					},
					fail:(err)=>{
						console.log("err",err)
					}
				});
			},
			jump(url) {
				this.$wanlshop.auth(url)
				// uni.navigateTo({
				// 	url: url
				// })
			},
			async circleLists() {
				await uni.request({
					url: '/addons/circle/api.index/works',
					method: 'post',
					data: {
						page: this.page

					},
					success: res => {
						console.log("circleLists", res)
						this.status = 'more';
						res.data.data.forEach((item, index) => {
							if (item.images) {
								const arr = item.images.split(',')
								const newArr = arr.map(itm => {
									return this.$wanlshop.oss(itm)
								})
								console.log(newArr)
								item.images = newArr
							}
						})
						this.list = this.reload ? res.data.data : this.list.concat(res.data
							.data); //数据 追加
						if (res.data.data.length == 0) {
							this.empty = `没有发布任何圈子`;
						}
						this.page = res.data.current_page; //当前页码
						this.last_page = res.data.last_page; //总页码
						console.log("this.list", this.list)
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.bg {
		width: 100%;
		height: 844rpx;
		position: fixed;
		top: 0;
		left: 0;
	}

	.top {
		padding: 56rpx 30rpx;
		position: sticky;
		z-index: 9;

		.topFlex {
			width: 100%;
			height: 120rpx;
			display: flex;
			align-items: center;

			.topFlexImg {
				width: 120rpx;
				height: 120rpx;
				border-radius: 6rpx;
			}

			.topFlexRight {
				margin-left: 24rpx;

				.topFlexRightTitle {
					font-size: 40rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #083600;

				}

				.topFlexRightText {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #0D5900;
					margin-top: 10rpx;

					.rightText1 {
						margin-left: 58rpx;
					}
				}
			}
		}

	}

	.list {
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		position: sticky;
		z-index: 9;

		.listItem {
			width: 330rpx;
			height: 550rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			margin-bottom: 30rpx;

			.listItemImg {
				width: 330rpx;
				height: 330rpx;
				border-radius: 10rpx 10rpx 0rpx 0rpx;
			}

			.listItemView {
				padding: 0 10rpx;

				.listItemTitle {
					font-size: 34rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					margin-top: 8rpx;
				}

				.listItemTime {
					font-size: 20rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #888888;
					// text-align: right;
					margin-top: 10rpx;
				}

				.listItemFlex {
					display: flex;
					align-items: center;
					margin-top: 18rpx;
					// flex-wrap: wrap;

					.icon-liulan1 {
						// margin-left: auto;
					}

					.footerFlexNum {
						font-size: 20rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #666666;
						margin-left: 4rpx;
						margin-right: 4rpx;
					}
				}

				.listItemFlexText {
					width: 80rpx;
					height: 54rpx;
					background: #4CBD66;
					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #fff;
					text-align: center;
					line-height: 54rpx;
					margin-top: 10rpx;
					border-radius: 10rpx;
				}
			}
		}
	}
</style>